<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%" class=""></div>
		<div class="verify">Verify</div>
		<!-- 步骤条 的组件 -->
		<ResulsComp :num="num" />
		<!-- 按钮1 -->
		<div v-if="num == 3" class="btn f f-a-c f-j-c">
			<div class="btnView hand">View</div>
			<div class="edit hand">Edit</div>
		</div>
		<div v-if="num == 4" class="error">
			<!-- Sorry, we can’t verify your account -->
			<div class="sorry">
				<div class="sorryImg"><img src="/src/assets/user/ku.png" class="kuImg" alt="" /></div>
				<div class="sorryCount">Sorry, we can’t verify your account</div>
				<div class="errorMessage">reason:1.xxxxx；</div>
				<div class="errorMessage">2.xxxPlease submit xxxxx.</div>
			</div>
			<!-- error按钮 -->
			<div class="btns f f-a-c f-j-c">
				<div class="btnView hand">View</div>
				<div @click="editor" class="edit hand">Edit</div>
			</div>
			<!-- Need help?  -->
			<div class="help">Need help? <i class="hand">Click here</i></div>
		</div>
		<div v-if="num == 5" class="error">
			<!-- Sorry, we can’t verify your account -->
			<div class="sorry">
				<div class="sorryImg"><img src="/src/assets/user/xiao.png" class="kuImg" alt="" /></div>
				<div class="sorryCount">Congrats</div>
				<div class="errorMessage">You’re now a verified expert!</div>
			</div>
			<!-- error按钮 -->
			<div class="btns f f-a-c f-j-c">
				<div class="btnView hand">View</div>
				<div @click="editor" class="edit hand">Done</div>
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted, reactive } from "vue";
	import { Plus } from "@element-plus/icons-vue";

	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ResulsComp from "./resulsComp.vue";

	let statusTab = ref(1);
	// 不要传2不更新，1，3，4，5代表1，2，3，4
	let num = ref(5);

	onMounted(() => {
		window.addEventListener("scroll", handleScroll);
	});

	// 点击去编辑
	const editor = () => {
		router.push({
			path: "/Verify",
			query: {
				id: 2
			}
		});
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style lang="scss" scoped>
	.error {
		margin-top: 60px;
		margin-bottom: 80px;
	}
	.help {
		font-size: 16px;
		font-family: Manrope, Manrope-400;
		font-weight: 400;
		text-align: center;
		color: #02102e;
		i {
			font-size: 16px;
			font-family: Manrope, Manrope-400;
			font-weight: 400;
			text-decoration: underline;
			color: #02102e;
		}
	}
	.sorry {
		width: 1280px;
		margin: 0 auto;
		.sorryImg {
			width: 72px;
			height: 72px;
			margin: 0 auto;
			margin-bottom: 20px;
			.kuImg {
				width: 100%;
				height: 100%;
			}
		}
		.sorryCount {
			font-size: 28px;
			font-family: Manrope, Manrope-700;
			font-weight: 700;
			margin-bottom: 20px;
			text-align: center;
			color: #000000;
		}
		.errorMessage {
			font-size: 18px;
			margin-bottom: 15px;
			font-family: Manrope, Manrope-400;
			font-weight: 400;
			text-align: CENTER;
			color: #000000;
		}
	}
	.btns {
		width: 1280px;
		margin: 32px auto 32px;
		.btnView {
			width: 95px;
			height: 40px;
			line-height: 40px;
			background: #02102e;
			border-radius: 8px;
			margin-right: 16px;
			font-size: 16px;
			font-family: Manrope, Manrope-700;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
		}
		.edit {
			width: 95px;
			height: 40px;
			line-height: 40px;
			background: #02102e;
			border-radius: 8px;
			font-size: 16px;
			font-family: Manrope, Manrope-700;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
		}
	}
	.btn {
		width: 1280px;
		margin: 60px auto 80px;
		.btnView {
			width: 95px;
			height: 40px;
			line-height: 40px;
			background: #02102e;
			border-radius: 8px;
			margin-right: 16px;
			font-size: 16px;
			font-family: Manrope, Manrope-700;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
		}
		.edit {
			width: 95px;
			height: 40px;
			line-height: 40px;
			background: #02102e;
			border-radius: 8px;
			font-size: 16px;
			font-family: Manrope, Manrope-700;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
		}
	}
	.verify {
		width: 1280px;
		margin: 0 auto;
		font-size: 28px;
		font-family: Manrope, Manrope-700;
		font-weight: 700;
		text-align: LEFT;
		color: #02102e;
		margin-bottom: 60px;
	}
</style>
